<template>
	<div>
		<div class="usercard" v-for="card in usercard" :key="card.card_name">
			<div :class="'card ' + (type == 2 ? 'off' :'')" :style="'background:'+card.bgcolor+';color:'+card.wordcolor">
				<span class="name">
					{{card.tocard.card_name}}
					<!-- <i v-if="card.card_type == 3">({{card.belongs_to_vipcard_receive_set.term_name}} {{card.belongs_to_vipcard_receive_set.stock_day}}天)</i> -->
				</span>
				<div class="time">
					有效期：{{youxiaoqi(card)}}
					<br/>
				</div>
				<div class="quanyi">
					<div v-if="card.tocard.discount !== '0.00'" style="margin-right:10px;">
						会员折扣<span class="red" style="color:#DAB15A;">{{card.tocard.discount}}</span>折
					</div>
					<div v-if="card.tocard.rate !== ''">
						 积分倍率<span class="red" style="color:#DAB15A;">{{card.tocard.rate}}</span>倍
					</div>
					<div v-if="card.tocard.gift_integral != 0 && card.tocard.gift_growth != 0">
						领卡送
						<span v-if="card.tocard.gift_integral != 0"><span class="red" style="color:#DAB15A;">{{card.tocard.gift_integral}}</span>积分、</span>
						<span v-if="card.tocard.gift_growth != 0"><span class="red" style="color:#DAB15A;">{{card.tocard.gift_growth}}</span>成长值、</span>
					</div>
				</div>
				<div class="bottom" v-if="!(card.tocard.user_knowledge == '使用说明' || card.tocard.user_knowledge == '')">
					<p>使用说明：{{card.tocard.user_knowledge}}</p>
				</div>
			</div>
      <img src="../../../assets/vips.png" class="viplogo" alt="">
    </div>
    	<load-more v-if="!usercard.length" :show-loading="false" :tip="type == 1 ? '暂无可用会员卡数据' : '暂无已失效会员卡数据'" background-color="#fbf9fe"></load-more>
	</div>
</template>

<script>
	import { mapState, mapActions, mapMutations, mapGetters } from 'vuex';
	export default {
		components:{

		},
		props : {
			type : ''
		},
		data(){
			return {

			}
		},
		methods : {
			youxiaoqi(card){
				if(card.tocard.effective_type == '1'){
					return '无限期'
				}else if(card.tocard.effective_type == '2'){
					return '至发卡日起后'+(card.tocard.valid_days || 0)+'天'
				}else{
					return card.tocard.startdate + ' 至 ' + card.tocard.enddate
				}
			}
		},
		computed : {
			usercard(){
				return this.$store.getters['user/card/data'](this.type);
			}
		}
	}
</script>

<style lang="less">
  .usercard{
    position: relative;
  }
	.card_box{height:100%;box-sizing: border-box; overflow-y: scroll;}
	.card{
		padding:10px;
		width: 90%;
		min-height: 113px;
		background: #fff;
    position: relative;
		margin:5px auto;
		border-radius:5px; font-size: 12px;
		box-shadow: 0px 0px 5px 0px #fff inset;
		border:1px solid #DCDFE6;
		// transform: perspective(1500px) rotateX(-15deg) rotateY(0deg) rotateZ(0deg);
		.name{
			font-size: 14px;
      color:#DAB15A;
			i { font-size:12px; font-style: normal}
		}
		.time{color:#909399;margin-top:10px;}
		.quanyi{
			/*min-height:72px;*/
			color:#606266;
      /*display: flex;*/
			margin-top: 10px;
			i{vertical-align: middle}
		}
		.bottom{
			color:#909399;
			height: 20px; line-break: 20px;
			padding-top:5px;
		}
		span.red{color:#F56C6C; font-size: 14px; padding:0 1px; font-family: Arial;}
	}
	.card:not(:first-child){
		margin-tOP:-100px;
	}
	.card.off{
		background: #EBEEF5;
	}

  .viplogo{
    position: absolute;
    top: 35px;
    right: 30px;
    width: 87px;
    height: 50px;
  }
</style>
